<template>
  <el-container class="main_con">
    <div class="filter_con ds_block">
      <div class="button_area">
        <el-button type="primary" v-has size="medium" @click="addItem">新增协议</el-button>
      </div>
      <div class="filter_area">
        <el-input
          class="serach_input mr_15 mt_15"
          size="medium"
          style="width:250px"
          v-model="obj.name"
          placeholder="分类名称"
        ></el-input>
        <label class="mr_15 mt_15">状态</label>
        <el-select size="medium" v-model="obj.status" placeholder="请选择" class="mr_15 mt_15">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table :data="list" element-loading-text fit highlight-current-row>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="title" label="协议标题"></el-table-column>
        <el-table-column prop="type" label="协议分类">
          <template slot-scope="scope">
            <span>{{scope.row.type | gettype}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="subhead" label="副标题"></el-table-column>
        <el-table-column prop="status_text" label="状态" width="120px"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button v-has
              type="text"
              @click="upDownItem(scope.row)"
            >{{scope.row.status == 1 ? '禁用' : '启用'}}</el-button>
            <el-button v-has type="text" @click="editItem(scope.row)">编辑</el-button>
            <el-button v-has type="text" @click="delItem(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" style="flex-direction: row-reverse;" v-show="total != 0">
        <el-pagination
          @current-change="changePage"
          class="pages"
          background
          hide-on-single-page
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </el-container>
</template>

<script>
import { delProtocol, editProtocol, getProtocols } from "@/api/mall/protocol";
export default {
  data() {
    return {
      options: [
        {
          value: -1,
          label: "全部"
        },
        {
          value: 1,
          label: "启用"
        },
        {
          value: 0,
          label: "未启用"
        }
      ],
      obj: {
        name: "",
        status: -1
      },
      objTemp: {},
      total: 0,
      page: 1,
      size: 10,
      isLoading: false,
      list: [],
      types: [
        {
          name: "分销协议",
          id: 1
        },
        {
          name: "入驻协议",
          id: 2
        },
        {
          name: "注册协议",
          id: 3
        },
        {
          name:"会员购买协议",
          id:4
        }
      ]
    };
  },
  filters: {
    gettype(type) {
      let types = [
        {
          name: "分销协议",
          id: 1
        },
        {
          name: "入驻协议",
          id: 2
        },
        {
          name: "注册协议",
          id: 3
        },
        {
          name:"会员购买协议",
          id:4
        }
      ];

      let b = types.filter(a => {
        return a.id == type;
      });
      if (b.length > 0) {
        return b[0].name;
      }
    }
  },

  components: {},
  mounted() {
    this.searchList();
  },
  methods: {
    //新增协议
    addItem() {
      this.$router.push("/setting/protocol/item");
    },
    //查询数据
    searchList() {
      //复制查询对象
      this.objTemp = Object.assign({}, this.obj);
      //status == -1时候删除字段
      if (this.objTemp.status == -1) {
        delete this.objTemp.status;
      }
      this.getDataList();
    },
    //查询数据本体
    getDataList() {
      this.isLoading = true;
      getProtocols(this.objTemp, this.page, this.size)
        .then(res => {
          this.isLoading = false;
          let o = res.msg;
          this.list = o.data;
          this.total = o.total;
        })
        .catch(e => {
          this.isLoading = false;
        });
    },
    //编辑数据
    editItem(obj) {
      //this.$router.push({path:'/merchant/item',query:{'id':obj.id}});
      this.$router.push({
        path: "/setting/protocol/item",
        query: {
          id: obj.id
        }
      });
    },
    //启用/禁用
    upDownItem(obj) {
      let _o = {};
      _o.id = obj.id;
      _o.update_time = obj.update_time;
      let s = "";
      if (obj.status == 1) {
        //当前为启用,操作后为禁用
        _o.status = 0;
        s = "是否禁用该文章?";
      } else if (obj.status == 0) {
        //当前为禁用,操作后为启用
        _o.status = 1;
        s = "是否启用该文章?";
      }

      this.$confirm(s)
        .then(_ => {
          this.isLoading = true;
          editProtocol(_o)
            .then(res => {
              this.isLoading = false;
              this.getDataList();
            })
            .catch(e => {
              this.isLoading = false;
            });
        })
        .catch(p => {
          //empty
        });
    },
    //删除数据
    delItem(id) {
      this.$confirm("是否要删除该条数据？")
        .then(_ => {
          this.isLoading = true;
          delProtocol(id)
            .then(res => {
              this.isLoading = false;
              //重新加载数据
              this.getDataList();
            })
            .catch(e => {
              this.isLoading = false;
            });
        })
        .catch(p => {
          //empty
        });
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    }
  }
};
</script>

<style lang="scss" scoped></style>
